<template>
	<view class="details">
		<view class="details-top"></view>
		<view class="details-message">
			<view class="details-message-name">姓名：张大炮</view>
			<view class="input-row border">
				来访时间：
					<input type="primary" placeholder="请选择时间" v-model="datetime" @click="onShowDatePicker('datetime')"></input>
			</view>

			<view class="input-row border">来访时间：
				<input type="primary" placeholder="请选择时间" v-model="datetime" @click="onShowDatePicker('datetime')"></input>
				<mx-date-picker
					:show="showPicker"
					:type="type"
					:value="value"
					:show-tips="true"
					:begin-text="'入住'"
					:end-text="'离店'"
					:show-seconds="true"
					@confirm="onSelected"
					@cancel="onSelected"
				/>
			</view>
		</view>
		<view class="intervieweeInformation">
			<view class="intervieweeInformation-company">受访部门：销售部</view>
			<!-- <view class="intervieweeInformation-company" @click="vistorDetail">访问详细记录</view> -->
		</view>
		<view class="btn-button">
			<view class="cancel">确定</view>
			<!-- <view class="Approved">审核通过</view>
			<view class="Confirm">确认离开</view> -->
		</view>
	</view>
</template>

<script>
import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
export default {
	components: {
		MxDatePicker
	},
	data() {
		return {
			showPicker: false,
			date: '2019/01/01',
			time: '15:00:12',
			datetime: '',
			range: ['2019/01/01', '2019/01/06'],
			rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
			type: 'rangetime',
			value: ''
		};
	},
	methods: {
		vistorDetail() {
			uni.reLaunch({
				url: './detailedRecords'
			});
		},
		timeChange(e) {
			this.time = e.target.value;
		},
		toggleTab(str) {
			this.$refs[str].show();
		},
		onShowDatePicker(type) {
			//显示
			this.type = type;
			this.showPicker = true;
			this.value = this[type];
		},
		onSelected(e) {
			//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
				//选择的值
				console.log('value => ' + e.value);
				//原始的Date对象
				console.log('date => ' + e.date);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.details {
	color: rgba(80, 80, 80, 1);
	font-size: 15px;
	width: 100%;
	background-color: white;
	.details-top {
		width: 117px;
		height: 117px;
		left: 148px;
		top: 105px;
		font-size: 117px;
		color: rgba(153, 153, 153, 1);
		border: 1px solid;
		margin: auto;
		margin-top: 10px;
	}
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 10px 0;
			border-bottom: 1px solid #eee;
		}
	}
	.intervieweeInformation {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 10px 0;
			border-bottom: 1px solid #eee;
		}
	}
	.statusInformation {
		width: 95%;
		margin: auto;
		.status-information {
			display: flex;
			.right {
				margin-left: 10px;
			}
		}
	}
	.btn-button {
		display: flex;
		width: 90%;
		margin: auto;
		justify-content: space-around;
		margin: 20px;
		uni-view {
			color: rgba(255, 255, 255, 1);

			border-radius: 18px;
			font-size: 11px;
			padding: 5px 20px;
		}
		.cancel {
			background-color: rgba(212, 48, 48, 1);
		}
		.Approved {
			background-color: rgba(42, 130, 228, 1);
		}
		.Confirm {
			background-color: rgba(128, 128, 128, 1);
		}
	}
}
.conBgSon {
	display: flex;
	justify-content: space-between;
	padding: 0 30upx;
	color: #8f8f94;
}
</style>
